<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 轮廓</title>
    <style>
        /*   outline 轮廓是绘制瑜元素的周围的线
             位于边框边缘的外围,可起到突出元素的作用
             css outline 属性规定元素轮廓的样式 颜色和宽度
        */
        p.line{
            border: red solid thin;
            outline: #00ff00 dotted thick;
            outline-style: dotted;
            outline-color: #F5A623;  /*  这条会生效  outline 还是不同*/
            outline-width: 3px;   /*  设置 outline 的线的宽度 */
        }

        p.dashed{outline-style: dashed}
        p.solid{outline-style: solid}
        p.double{outline-style: double} /*  两条实线*/
        p.groove{outline-style: groove}
        p.ridge{outline-style: ridge}
        p.inset{outline-style: inset}
        p.outset{outline-style: outset}

    </style>
</head>
<body>
    <p class="line">A dotted outline</p>
    <p class="dashed">A dashed outline</p>
    <p class="solid">A solid outline</p>
    <p class="double">A double outline</p>
    <p class="groove">A groove outline</p>
    <p class="ridge">A ridge outline</p>
    <p class="inset">An inset outline</p>
    <p class="outset">An outset outline</p>
    <p><b>注释：</b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本） 才支持 outline-style 属性。</p>
</body>
</html>